<html lang="zh" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录</title>

<link rel="stylesheet" type="text/css" href="/resa/css/login/styles.css">
<style type="text/css">
body,td,th { font-family: "Source Sans Pro", sans-serif; }
body { background-color: #2B2B2B; }
</style>
</head>
<body>


<div class="wrapper">

	<div class="container">
		<h1 id="message" style="z-index: 9999"><span th:text="${message}">Welcome</span></h1>
		<form class="form">
			<input id="username" name="username" type="text" placeholder="Username">
			<input id="password" name="password" type="password" placeholder="Password">
			<button type="button" id="login-button">Login</button>
		</form>
	</div>
	
	<ul class="bg-bubbles">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	
</div>

<script type="text/javascript" src="/resa/js/login/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$('#login-button').click(function(){
	var username = $('#username').val();
	var password = $('#password').val();
	if(username == '') {
		alert('用户名不能为空！');
		return false;
	}
	if(password == '') {
		alert("密码不能为空！");
		return false;
	}

	$.ajax({
		url: "/resa/submitLogin.do",
		data: {"username":username,"password":password},
		type: "POST",
		dataType: "JSON",
		beforeSend: function () {
			$('#message').text("Loading..");
			// $("#login-button").attr({ disabled: "disabled" });
		},
		success:function(result){
			console.log(result)
			// $("#login-button").attr({ disabled: "false" });
			if( result.code == 200) {
				$('#message').text("Welcome")
				// event.preventDefault();
				$('form').fadeOut(500);
				$('form').hide();
				$('.wrapper').addClass('form-success');
				window.location.href="/resa/home.do";
				return;
			}else{
				$('#message').text(result.message)
				// alert("登录失败")
			}
		},error:function () {
			alert("请求错误")
		}
	});

});
</script>

</body>
</html>